<template>
  <div class="paper hideScrollBar" ref="scrollEl">
    <!-- 内容部分 -->
    <div class="content">
      <!-- 导航 -->
      <NavBar
        :title="t('paper.pageTitle')"
        isTransparent
        :navScorllOffset="60"
        navScorllColor="#FFF"
        :scrollEl="scrollEl"
        @thresholdChange="(val) => (pageData.isShowAnchor = val)"
        @getNavBarHeight="(h) => (pageData.navBarHeight = h)"
        isFixed
      />
      <!-- 定位锚点 tab -->
      <div
        v-if="pageData.isShowAnchor"
        class="anchor items-center scrollable-content"
        style="height: 54px"
        ref="anchorEl"
      >
        <div
          v-for="(item, index) in pageData.refs"
          :key="index"
          class="anchor-item"
          :class="{ 'anchor-activity': pageData.currentIdx === index }"
          :ref="(el) => setRefAction(el, index)"
          @click="anchorJump(index)"
        >
          {{ item.title }}
        </div>
      </div>
      <!-- 头部 -->
      <div class="header items-center">
        <img class="header-bg" src="/image/mvp/coin/bdc-introduced-bg.png" />
        <div class="header-text">{{ t("paper.pageTitle") }}</div>
      </div>
      <div style="position: relative">
        <!-- 项目背景介绍 -->
        <div ref="xmjs"></div>
        <Group class="content-margin" :title="t('paper.xmjs')">
          <div class="text-zw content-padding">
            <div class="text-oneline">{{ t("paper.xmjs_desc1") }}</div>
            <div class="text-oneline">{{ t("paper.xmjs_desc2") }}</div>
            <div>{{ t("paper.xmjs_desc3") }}</div>
          </div>
          <GroupTitle class="text-title-padding" src="papger-wallet.svg">{{
            t("paper.xmjs_title1")
          }}</GroupTitle>
          <div class="text-zw content-padding">
            <div>{{ t("paper.xmjs_micro") }}</div>
          </div>
          <GroupTitle class="text-title-padding" src="papger-fast.svg">{{
            t("paper.xmjs_title2")
          }}</GroupTitle>
          <div class="text-zw content-padding">
            <div>{{ t("paper.xmjs_title2_desc") }}</div>
          </div>
          <GroupTitle class="text-title-padding" src="papger-seting.svg">{{
            t("paper.xmjs_title3")
          }}</GroupTitle>
          <div class="text-zw content-padding">
            <div>{{ t("paper.xmjs_title3_desc") }}</div>
          </div>
          <GroupTitle class="text-title-padding" src="papger-rz.svg">{{
            t("paper.xmjs_title4")
          }}</GroupTitle>
          <div class="text-zw content-padding">
            <div class="text-oneline">{{ t("paper.xmjs_title4_desc") }}</div>
            <div>{{ t("paper.xmjs_title4_desc1") }}</div>
          </div>
          <GroupTitle class="text-title-padding" src="papger-probability.svg">{{
            t("paper.xmjs_title5")
          }}</GroupTitle>
          <div class="text-zw content-padding">
            <div class="text-oneline">{{ t("paper.xmjs_title5_desc") }}</div>
            <div class="text-oneline">{{ t("paper.xmjs_title5_desc1") }}</div>
            <div>{{ t("paper.xmjs_title5_desc2") }}</div>
          </div>
        </Group>
        <!-- 目标与愿景 -->
        <div ref="mbyyj"></div>
        <Group class="content-margin" :title="t('paper.mbyyj')">
          <GroupTitle class="text-title-padding" src="paper-target.svg">{{
            t("paper.mbyyj_title1")
          }}</GroupTitle>
          <div class="text-zw content-padding">
            <div>{{ t("paper.mbyyj_title1_desc") }}</div>
          </div>
          <GroupTitle class="text-title-padding" src="paper-collection.svg">{{
            t("paper.mbyyj_title2")
          }}</GroupTitle>
          <div class="text-zw content-padding">
            <div>{{ t("paper.mbyyj_title2_desc") }}</div>
          </div>
        </Group>
        <!-- 代币经济 -->
        <div ref="dbjj"></div>
        <Group class="content-margin" :title="t('paper.dbjj')">
          <GroupTitle type="2" sort="1" class="text-title-padding">{{
            t("paper.dbjj_title")
          }}</GroupTitle>
          <div class="text-zw content-padding">
            <div>{{ t("paper.dbjj_title_desc") }}</div>
          </div>
          <GroupTitle type="2" sort="2" class="text-title-padding">{{
            t("paper.dbjj_title1")
          }}</GroupTitle>
          <div class="text-zw content-padding">
            <div>{{ t("paper.dbjj_title1_desc") }}</div>
          </div>
          <GroupTitle type="2" sort="3" class="text-title-padding">{{
            t("paper.dbjj_title2")
          }}</GroupTitle>
          <div class="text-zw content-padding">
            <div>{{ t("paper.dbjj_title2_desc") }}</div>
          </div>
          <GroupTitle type="2" sort="4" class="text-title-padding">{{
            t("paper.dbjj_title3")
          }}</GroupTitle>
          <div class="text-zw content-padding mb10">
            <div>{{ t("paper.dbjj_title3_desc") }}</div>
          </div>
          <!-- 表格 -->
          <GroupTable
            class="content-padding"
            title=""
            :header="[t('paper.dbjj_table_title')]"
            :cols="[
              {
                list: [
                  t('paper.dbjj_table_col1_text1'),
                  t('paper.dbjj_table_col1_text2'),
                  t('paper.dbjj_table_col1_text3'),
                ],
              },
              {
                list: [
                  t('paper.dbjj_table_col2_text1'),
                  t('paper.dbjj_table_col2_text2'),
                  t('paper.dbjj_table_col2_text3'),
                ],
              },
            ]"
          ></GroupTable>
          <GroupTitle type="2" sort="5" class="text-title-padding">
            {{ t("paper.dbjj_title4") }}
          </GroupTitle>
          <!-- 表格 -->
          <GroupTable
            class="content-padding"
            :colColorIdx="1"
            :title="t('paper.dbjj_table1_title')"
            :header="[
              t('paper.dbjj_table1_header_text1'),
              t('paper.dbjj_table1_header_text2'),
              t('paper.dbjj_table1_header_text3'),
            ]"
            :cols="[
              {
                list: [
                  t('paper.dbjj_table1_col1_text1'),
                  t('paper.dbjj_table1_col1_text2'),
                  t('paper.dbjj_table1_col1_text3'),
                ],
              },
              {
                list: [
                  t('paper.dbjj_table1_col2_text1'),
                  t('paper.dbjj_table1_col2_text2'),
                  t('paper.dbjj_table1_col2_text3'),
                ],
              },
              {
                list: [
                  t('paper.dbjj_table1_col3_text1'),
                  t('paper.dbjj_table1_col3_text2'),
                  t('paper.dbjj_table1_col3_text3'),
                ],
              },
            ]"
          ></GroupTable>
          <GroupTitle type="3" class="text-title-padding">
            {{ t("paper.dbjj_title5") }}
          </GroupTitle>
          <div class="text-zw content-padding">
            <div>{{ t("paper.dbjj_title5_desc") }}</div>
          </div>
          <GroupTitle type="3" class="text-title-padding">
            {{ t("paper.dbjj_title6") }}
          </GroupTitle>
          <div class="text-zw content-padding">
            <div>{{ t("paper.dbjj_title6_desc") }}</div>
          </div>
          <GroupTitle type="3" class="text-title-padding">
            {{ t("paper.dbjj_title7") }}
          </GroupTitle>
          <div class="text-zw content-padding mb10">
            <div>{{ t("paper.dbjj_title7_desc") }}</div>
          </div>
          <!-- 表格 -->
          <GroupTable
            class="content-padding"
            style="margin-bottom: 20px"
            :colColorIdx="1"
            :colHeight="55"
            :title="t('paper.dbjj_table2_title')"
            headerClass="header-size"
            :header="[
              t('paper.dbjj_table2_header_text1'),
              t('paper.dbjj_table2_header_text2'),
              t('paper.dbjj_table2_header_text3'),
              t('paper.dbjj_table2_header_text4'),
              t('paper.dbjj_table2_header_text5'),
            ]"
            :cols="[
              {
                list: [
                  t('paper.dbjj_table2_col1_text1'),
                  t('paper.dbjj_table2_col1_text2'),
                  t('paper.dbjj_table2_col1_text3'),
                  t('paper.dbjj_table2_col1_text4'),
                ],
              },
              {
                list: [
                  t('paper.dbjj_table2_col2_text1'),
                  t('paper.dbjj_table2_col2_text2'),
                  t('paper.dbjj_table2_col2_text3'),
                  t('paper.dbjj_table2_col2_text4'),
                ],
              },
              {
                list: [
                  t('paper.dbjj_table2_col3_text1'),
                  t('paper.dbjj_table2_col3_text2'),
                  t('paper.dbjj_table2_col3_text3'),
                  t('paper.dbjj_table2_col3_text4'),
                ],
              },
              {
                list: [
                  t('paper.dbjj_table2_col4_text1'),
                  t('paper.dbjj_table2_col4_text2'),
                  t('paper.dbjj_table2_col4_text3'),
                  t('paper.dbjj_table2_col4_text4'),
                ],
              },
              {
                list: [
                  t('paper.dbjj_table2_col5_text1'),
                  t('paper.dbjj_table2_col5_text2'),
                  t('paper.dbjj_table2_col5_text3'),
                  t('paper.dbjj_table2_col5_text4'),
                ],
              },
            ]"
          ></GroupTable>
          <!-- 时间表 -->
          <div class="text-title mb10" style="color: #141924">
            {{ t("paper.dbjj_title8") }}
          </div>
          <div class="items-center mb10" style="justify-content: center">
            <div class="text-tl text-tl1">
              {{ t("paper.dbjj_title5") }}
            </div>
            <div class="text-tl text-tl2">
              {{ t("paper.dbjj_title6") }}
            </div>
            <div class="text-tl text-tl3">
              {{ t("paper.dbjj_title7") }}
            </div>
          </div>
          <img class="content-padding" src="/image/mvp/paper-time.png" />
        </Group>
        <!-- 代币发行 -->
        <div ref="dbfx"></div>
        <Group class="content-margin" :title="t('paper.dbfx')">
          <GroupTitle type="2" sort="1" class="text-title-padding">{{
            t("paper.dbfx_title1")
          }}</GroupTitle>
          <div class="text-zw content-padding">
            <div>{{ t("paper.dbfx_title1_desc") }}</div>
          </div>
          <GroupTitle type="3" class="text-title-padding">
            {{ t("paper.dbfx_title2") }}
          </GroupTitle>
          <div class="text-zw content-padding">
            <div>{{ t("paper.dbfx_title2_desc") }}</div>
          </div>
          <GroupTitle type="3" class="text-title-padding">
            {{ t("paper.dbfx_title3") }}
          </GroupTitle>
          <div class="text-zw content-padding">
            <div>{{ t("paper.dbfx_title3_desc") }}</div>
          </div>
          <GroupTitle type="3" class="text-title-padding">
            {{ t("paper.dbfx_title4") }}
          </GroupTitle>
          <div class="text-zw content-padding">
            <div>{{ t("paper.dbfx_title4_desc") }}</div>
          </div>
          <GroupTitle type="3" class="text-title-padding">
            {{ t("paper.dbfx_title5") }}
          </GroupTitle>
          <div class="text-zw content-padding mb10">
            <div>{{ t("paper.dbfx_title5_desc") }}</div>
          </div>
          <GroupTitle type="2" sort="2" class="text-title-padding">{{
            t("paper.dbfx_title6")
          }}</GroupTitle>
          <div class="text-zw content-padding">
            <div>{{ t("paper.dbfx_title6_desc") }}</div>
          </div>
        </Group>
        <!-- 代币用途 -->
        <div ref="dbyt"></div>
        <Group class="content-margin" :title="t('paper.dbyt')">
          <GroupTitle type="2" sort="1" class="text-title-padding">{{
            t("paper.dbyt_title1")
          }}</GroupTitle>
          <div class="text-zw content-padding">
            <div>{{ t("paper.dbyt_title1_desc") }}</div>
          </div>
          <GroupTitle type="2" sort="2" class="text-title-padding">{{
            t("paper.dbyt_title2")
          }}</GroupTitle>
          <div class="text-zw content-padding">
            <div>{{ t("paper.dbyt_title2_desc") }}</div>
          </div>
          <GroupTitle type="2" sort="3" class="text-title-padding">{{
            t("paper.dbyt_title3")
          }}</GroupTitle>
          <div class="text-zw content-padding">
            <div>{{ t("paper.dbyt_title3_desc") }}</div>
          </div>
        </Group>
        <!-- 激励措施 -->
        <!-- <div ref="jlcs"></div> -->
        <Group v-if="false" class="content-margin" :title="t('paper.jlcs')">
          <GroupTitle type="2" sort="1" class="text-title-padding">{{
            t("paper.jlcs_title1")
          }}</GroupTitle>
          <div class="text-zw content-padding">
            <div>{{ t("paper.jlcs_title1_desc") }}</div>
          </div>
          <GroupTitle type="2" sort="2" class="text-title-padding">{{
            t("paper.jlcs_title2")
          }}</GroupTitle>
          <div class="text-zw content-padding">
            <div>{{ t("paper.jlcs_title2_desc") }}</div>
          </div>
        </Group>
        <!-- 发展路线 -->
        <!-- <div ref="fzlx"></div> -->
        <Group v-if="false" class="content-margin" :title="t('paper.fzlx')">
          <!--  v-viewer组件  v-viewer="{ movable: false }" -->
          <img
            v-if="imgUrl.fzjl"
            class="content-padding mb10"
            :src="imgUrl.fzjl"
            @click="imagePreview('/image/mvp/paper-fzjl.png')"
          />
          <!-- 1.0 -->
          <!-- <div  class="text-version">{{ t("paper.fzlx_title2") }}</div>
        <div class="text-title text-left">
          {{ t("paper.fzlx_title3") }}
        </div>
        <div class="group-title-bg">
          <GroupTitle
            type="3"
            class="text-title-padding"
            style="padding-top: 10px"
            >{{ t("paper.fzlx_title4") }}</GroupTitle
          >
          <div class="text-zw content-padding">
            <div>{{ t("paper.fzlx_title4_desc") }}</div>
          </div>
          <GroupTitle type="3" class="text-title-padding">{{
            t("paper.fzlx_title5")
          }}</GroupTitle>
          <div class="text-zw content-padding">
            <div>{{ t("paper.fzlx_title5_desc") }}</div>
          </div>
          <GroupTitle type="3" class="text-title-padding">{{
            t("paper.fzlx_title6")
          }}</GroupTitle>
          <div class="text-zw content-padding">
            <div>{{ t("paper.fzlx_title6_desc") }}</div>
          </div>
          <GroupTitle type="3" class="text-title-padding">{{
            t("paper.fzlx_title7")
          }}</GroupTitle>
          <div class="text-zw content-padding" style="padding-bottom: 10px">
            <div>{{ t("paper.fzlx_title7_desc") }}</div>
          </div>
        </div>
        <div class="group-title-bg-bottom"></div> -->
          <!-- 2.0 -->
          <!-- <div class="text-version">{{ t("paper.fzlx_title8") }}</div>
        <div class="text-title text-left">
          {{ t("paper.fzlx_title9") }}
        </div>
        <div class="group-title-bg">
          <GroupTitle
            type="3"
            class="text-title-padding"
            style="padding-top: 10px"
            >{{ t("paper.fzlx_title10") }}</GroupTitle
          >
          <div class="text-zw content-padding">
            <div>{{ t("paper.fzlx_title10_desc") }}</div>
          </div>
          <GroupTitle type="3" class="text-title-padding">{{
            t("paper.fzlx_title11")
          }}</GroupTitle>
          <div class="text-zw content-padding">
            <div>{{ t("paper.fzlx_title11_desc") }}</div>
          </div>
          <GroupTitle type="3" class="text-title-padding">{{
            t("paper.fzlx_title12")
          }}</GroupTitle>
          <div class="text-zw content-padding">
            <div>{{ t("paper.fzlx_title12_desc") }}</div>
          </div>
          <GroupTitle type="3" class="text-title-padding">{{
            t("paper.fzlx_title13")
          }}</GroupTitle>
          <div class="text-zw content-padding">
            <div>{{ t("paper.fzlx_title13_desc") }}</div>
          </div>
          <GroupTitle type="3" class="text-title-padding">{{
            t("paper.fzlx_title14")
          }}</GroupTitle>
          <div class="text-zw content-padding" style="padding-bottom: 10px">
            <div>{{ t("paper.fzlx_title14_desc") }}</div>
          </div>
        </div>
        <div class="group-title-bg-bottom"></div> -->
          <!-- 3.0 -->
          <!-- <div class="text-version">{{ t("paper.fzlx_title15") }}</div>
        <div class="text-title text-left">
          {{ t("paper.fzlx_title16") }}
        </div>
        <div class="group-title-bg">
          <GroupTitle
            type="3"
            class="text-title-padding"
            style="padding-top: 10px"
            >{{ t("paper.fzlx_title17") }}</GroupTitle
          >
          <div class="text-zw content-padding">
            <div>{{ t("paper.fzlx_title17_desc") }}</div>
          </div>
          <GroupTitle type="3" class="text-title-padding">{{
            t("paper.fzlx_title18")
          }}</GroupTitle>
          <div class="text-zw content-padding">
            <div>{{ t("paper.fzlx_title18_desc") }}</div>
          </div>
          <GroupTitle type="3" class="text-title-padding">{{
            t("paper.fzlx_title19")
          }}</GroupTitle>
          <div class="text-zw content-padding">
            <div>{{ t("paper.fzlx_title19_desc") }}</div>
          </div>
          <GroupTitle type="3" class="text-title-padding">{{
            t("paper.fzlx_title20")
          }}</GroupTitle>
          <div class="text-zw content-padding" style="padding-bottom: 10px">
            <div>{{ t("paper.fzlx_title20_desc") }}</div>
          </div>
        </div>
        <div class="group-title-bg-bottom"></div> -->
          <!-- 4.0 -->
          <!-- <div class="text-version">{{ t("paper.fzlx_title21") }}</div>
        <div class="text-title text-left">
          {{ t("paper.fzlx_title22") }}
        </div>
        <div class="group-title-bg">
          <GroupTitle
            type="3"
            class="text-title-padding"
            style="padding-top: 10px"
            >{{ t("paper.fzlx_title23") }}</GroupTitle
          >
          <div class="text-zw content-padding">
            <div>{{ t("paper.fzlx_title23_desc") }}</div>
          </div>
          <GroupTitle type="3" class="text-title-padding">{{
            t("paper.fzlx_title24")
          }}</GroupTitle>
          <div class="text-zw content-padding">
            <div>{{ t("paper.fzlx_title24_desc") }}</div>
          </div>
          <GroupTitle type="3" class="text-title-padding">{{
            t("paper.fzlx_title25")
          }}</GroupTitle>
          <div class="text-zw content-padding" style="padding-bottom: 10px">
            <div>{{ t("paper.fzlx_title25_desc") }}</div>
          </div>
        </div>
        <div class="group-title-bg-bottom"></div> -->
          <!-- BDC Future -->
          <!-- <div class="text-version" style="border-left: none">
          {{ t("paper.fzlx_title26") }}
        </div>
        <div class="text-title text-left" style="border-left: none">
          {{ t("paper.fzlx_title27") }}
        </div> -->
        </Group>
        <!-- 团队与合作伙伴 -->
        <div ref="tdyhzhb"></div>
        <Group class="content-margin" :title="t('paper.tdyhzhb')">
          <GroupTitle class="text-title-padding" src="paper-cooperation.svg">{{
            t("paper.tdyhzhb_title1")
          }}</GroupTitle>
          <div class="text-zw content-padding">
            <div>{{ t("paper.tdyhzhb_title1_desc") }}</div>
          </div>
          <GroupTitle class="text-title-padding" src="paper-team.svg">{{
            t("paper.tdyhzhb_title2")
          }}</GroupTitle>
          <div class="text-zw content-padding">
            <div>{{ t("paper.tdyhzhb_title2_desc") }}</div>
          </div>
        </Group>
        <!-- 总结 -->
        <div ref="zj"></div>
        <Group class="content-margin" :title="t('paper.zj')">
          <div class="text-zw content-padding">
            <div>{{ t("paper.zj_title1") }}</div>
          </div>
        </Group>
      </div>
    </div>
    <!-- 利用相应式原理，监听多个数值变化 -->
    <div style="position: absolute; bottom: -990px; left: -999px">
      {{ currentIdx }}
    </div>
  </div>
</template>
<script setup name="paper">
import { getOssFileUrl } from "@/utils";
import Group from "../../../components/mvp/paper/group.vue";
import GroupTitle from "../../../components/mvp/paper/group-title.vue";
import GroupTable from "../../../components/mvp/paper/group-table.vue";
import { useElementBounding } from "@vueuse/core";
import { showImagePreview } from "vant";

// definePageMeta({
//   keepalive: true,
// });

const { t } = useI18n();
const imgUrl = getOssFileUrl({
  headerBg: "/image/mvp/coin/bdc-introduced-bg.png",
  fzjl: "/image/mvp/paper-fzjl.png",
});

// firebase埋点
// const firebase = useInitFirebase(); // 初始化firebase
// firebase?.logEvent('BDC_H5_FAQJump');

// 页面属性
const pageData = reactive({
  isShowAnchor: false,
  navBarHeight: 0,
  currentIdx: -1,
  scrollIng: false,
  refs: [],
  anchorRefs: [],
});
//将循环ref放入到数组中
const setRefAction = (el, item) => {
  pageData.anchorRefs[item] = el;
};
const anchorJump = (idx) => {
  pageData.currentIdx = idx;
  pageData.scrollIng = true;
  let offsetTop = 0;

  if (idx > 0 && pageData.refs[idx].ref.offsetTop) {
    // console.log("--pageData[id]--", pageData.refs[idx].ref);
    offsetTop = pageData.refs[idx].ref.offsetTop - pageData.navBarHeight - 54;
  }
  // console.log(offsetTop, "--id--", idx);
  if (scrollEl.value) {
    scrollEl.value.scrollTo({
      top: offsetTop - 88,
      behavior: "smooth",
    });
  }

  setTimeout(() => {
    pageData.scrollIng = false;
  }, 800);
};

const scrollEl = ref();
const anchorEl = ref();
const xmjs = ref();
const mbyyj = ref();
const dbjj = ref();
const dbfx = ref();
const dbyt = ref();
// const jlcs = ref();
// const fzlx = ref();
const tdyhzhb = ref();
const zj = ref();

const { y: xmjs_top } = useElementBounding(xmjs);
const { y: mbyyj_top } = useElementBounding(mbyyj);
const { y: dbjj_top } = useElementBounding(dbjj);
const { y: dbfx_top } = useElementBounding(dbfx);
const { y: dbyt_top } = useElementBounding(dbyt);
// const { y: jlcs_top } = useElementBounding(jlcs);
// const { y: fzlx_top } = useElementBounding(fzlx);
const { y: tdyhzhb_top } = useElementBounding(tdyhzhb);
// const { y: zj_top } = useElementBounding(zj)

const currentIdx = computed({
  get() {
    if (pageData.scrollIng) return pageData.currentIdx;
    if (xmjs_top.value < 110 && xmjs_top.value > 0) {
      pageData.currentIdx = 0;
    } else if (mbyyj_top.value < 110 && mbyyj_top.value > 0) {
      pageData.currentIdx = 1;
    } else if (dbjj_top.value < 110 && dbjj_top.value > 0) {
      pageData.currentIdx = 2;
    } else if (dbfx_top.value < 110 && dbfx_top.value > 0) {
      pageData.currentIdx = 3;
    } else if (dbyt_top.value < 110 && dbyt_top.value > 0) {
      pageData.currentIdx = 4;
    }
    // else if (jlcs_top.value < 110 && jlcs_top.value > 0) {
    //   pageData.currentIdx = 5;
    // } else if (fzlx_top.value < 110 && fzlx_top.value > 0) {
    //   pageData.currentIdx = 6;
    // }
    else if (tdyhzhb_top.value < 110 && tdyhzhb_top.value > 0) {
      pageData.currentIdx = 5;
    }

    return pageData.currentIdx;
  },

  set(val) {
    pageData.currentIdx = val;
  },
});
watch(
  () => pageData.currentIdx,
  (newVal) => {
    if (newVal > -1 && pageData.anchorRefs[pageData.currentIdx] && anchorEl) {
      let offsetTop = pageData.anchorRefs[pageData.currentIdx].offsetLeft;
      anchorEl.value.scrollTo({
        left: offsetTop - 88,
        behavior: "smooth",
      });
    }
  }
);

const imagePreview = (path) => {
  showImagePreview([imgUrl.fzjl]);
};

onMounted(() => {
  pageData.refs = [
    {
      title: t("paper.xmjs"),
      ref: xmjs,
    },
    {
      title: t("paper.mbyyj"),
      ref: mbyyj,
    },
    {
      title: t("paper.dbjj"),
      ref: dbjj,
    },
    {
      title: t("paper.dbfx"),
      ref: dbfx,
    },
    {
      title: t("paper.dbyt"),
      ref: dbyt,
    },
    // {
    //   title: t("paper.jlcs"),
    //   ref: jlcs,
    // },
    // {
    //   title: t("paper.fzlx"),
    //   ref: fzlx,
    // },
    {
      title: t("paper.tdyhzhb"),
      ref: tdyhzhb,
    },
    {
      title: t("paper.zj"),
      ref: zj,
    },
  ];
});
</script>
<style lang="scss" scoped>
.paper {
  position: relative;
  background-color: #edf6ff;
  height: 100vh;
  overflow-y: scroll;
  overflow-x: hidden;
  // margin-bottom: constant(safe-area-inset-bottom);
  padding-bottom: var(--safe-area-inset-bottom);

  .content {
    // padding: 0 15 * 2px;
    background: linear-gradient(
      180deg,
      #007bff 0%,
      rgba(236, 245, 255, 0) 100%
    );
    background-size: 100vh 250 * 2px;
    background-repeat: no-repeat;

    .header {
      position: relative;
      height: 104 * 2px;

      &-bg {
        position: absolute;
        top: 0;
        right: 0;
        width: 100vw;
        height: 178 * 2px;
      }
      &-text {
        width: 220 * 2px;
        margin-left: 25 * 2px;
        font-size: 24 * 2px;
        font-weight: 700;
        color: #006fe6;
      }
    }
    &-margin {
      margin: 0 15 * 2px;
      margin-bottom: 10 * 2px;
      padding-bottom: 15 * 2px;
    }
    &-padding {
      padding: 0 15 * 2px;
    }
  }

  .text {
    &-tl1::before {
      content: "";
      position: absolute;
      top: 6px;
      left: -10 * 2px;
      width: 6 * 2px;
      height: 6 * 2px;
      background-color: #007bff;
    }
    &-tl2::before {
      content: "";
      position: absolute;
      top: 6px;
      left: -10 * 2px;
      width: 6 * 2px;
      height: 6 * 2px;
      background-color: #00e7b5;
    }
    &-tl3::before {
      content: "";
      position: absolute;
      top: 6px;
      left: -10 * 2px;
      width: 6 * 2px;
      height: 6 * 2px;
      background-color: #ffb800;
    }

    &-tl {
      margin-right: 30 * 2px;
      position: relative;
      font-size: 11 * 2px;
      color: #141924;
    }
    &-left {
      text-align: left !important;
      padding-left: 15 * 2px;
      margin-left: 10 * 2px;
      padding-top: 10 * 2px;
      padding-bottom: 10 * 2px;
    }
    &-version {
      display: inline-block;
      margin-left: 10 * 2px;
      padding-left: 14 * 2px;
      padding-right: 18 * 2px;
      height: 24 * 2px;
      line-height: 24 * 2px;
      background-color: #007bff;
      color: #fff;
      text-align: center;
      font-size: 13 * 2px;
      font-weight: 590;
      border-top-right-radius: 100px;
      border-bottom-right-radius: 100px;
      // border-left: 1px dashed rgba(0, 123, 255, 40%);
    }
    &-title {
      color: #007bff;
      text-align: center;
      font-size: 13 * 2px;
      font-weight: 590;
      // border-left: 1px dashed rgba(0, 123, 255, 40%);
    }
    &-zw {
      color: #141924;
      font-size: 13 * 2px;
      line-height: 18 * 2px;
    }
    &-oneline {
      margin-bottom: 18 * 2px;
    }
    &-title-padding {
      padding: 20 * 2px 15 * 2px 10 * 2px 15 * 2px;
    }
  }

  .group {
    &-title-bg {
      margin: 0 10 * 2px;
      background-color: #f4f9ff;
      border-radius: 5px;
      // border-left: 1px dashed rgba(0, 123, 255, 40%);
    }
    &-title-bg-bottom {
      margin-left: 10 * 2px;
      height: 10 * 2px;
      background-color: #fff;
      // border-left: 1px dashed rgba(0, 123, 255, 40%);
      // width: 100%;
    }
  }
  .mb10 {
    margin-bottom: 10 * 2px !important;
  }
  .bgintroduction {
    height: 200vh;
  }
}
.anchor {
  position: fixed;
  padding-left: 15 * 2px;
  left: 0;
  background-color: #fff;
  // background: linear-gradient(180deg, #ecf5ff 0%, #f9fcff 100%);
  box-shadow: 0px 2px 8px 0px rgba(21, 81, 145, 0.16);
  z-index: 999;
  width: 100vw;
  overflow-x: scroll;
  overflow-y: hidden;

  &-activity {
    padding: 0 12 * 2px;
    border-radius: 28px;
    background: #e1efff;
    color: #007bff;
  }
  &-item {
    font-weight: 590;
    white-space: nowrap;
    margin-right: 24 * 2px;
    font-size: 13 * 2px;
    height: 26 * 2px;
    line-height: 26 * 2px;
    text-align: center;
  }
}

/* 隐藏滚动条 */
.scrollable-content::-webkit-scrollbar {
  width: 0.5em;
  height: 0.5em;
}

.scrollable-content::-webkit-scrollbar-thumb {
  background-color: transparent;
}

.scrollable-content::-webkit-scrollbar-track {
  background-color: transparent;
}
</style>
